<template>
  <div class="flex flex-col">
    <!-- 背景图片 -->
    <img src="../../public/images/home-bg.jpg" alt="bg-image" class="w-screen fixed top-0 left-0 z-0 object-cover" />
    <!-- 顶部导航栏 -->
    <nav class="text-white relative bg-opacity-80 bg-black p-4 rounded-t-2xl">
      <div class="container flex justify-between items-center">
        <span class="text-6xl font-bold ml-16 text-amber-400">趣味博物馆</span>
        <ul class="flex space-x-6 text-4xl shadow-2xl rounded-2xl px-10 py-4 mr-12 items-center">
          <li><a href="#" class="hover:text-amber-400" @click.prevent="goToExhibitions">文物鉴赏</a></li>
          <li><a href="#" class="hover:text-amber-400" @click.prevent="goToGame">互动体验</a></li>
          <li><a href="#" class="hover:text-amber-400" @click.prevent="goToAbout">关于我们</a></li>
          <li>
            <div class="relative">
              <input type="text" placeholder="搜索文物..." class="px-4 py-2 rounded-full w-auto focus:outline-none focus:ring-2 focus:ring-amber-400 bg-white text-black" />
              <button class="absolute right-0 top-0 bg-none p-0 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M8 4a4 4 0 100-8 4 4 0 018 0zm6 8a4 4 0 11-8 0 4 4 0 018 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0z" clip-rule="evenodd" />
                </svg>
              </button>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <!-- 侧边栏 -->
    <aside class="bg-opacity-80 text-3xl bg-black shadow-2xl rounded-2xl w-1/5 p-4 fixed top-0 right-0 bottom-0 overflow-y-auto">
      <div class="flex flex-col space-y-4">
        <!-- 用户信息 -->
        <div class="flex flex-col items-center justify-center p-4 bg-opacity-60 bg-black rounded-xl cursor-pointer hover:bg-opacity-80 transition-colors">
          <img :src="visitInfo.avatar" alt="用户头像" class="w-32 h-32 object-cover rounded-full" v-if="visitInfo.avatar" />
          <h3 class="text-4xl text-white font-bold mt-2">{{ visitInfo.username }}</h3>
          <p class="text-gray-400 mt-2">{{ visitInfo.role }}</p>
          <p class="text-gray-400 mt-1">{{ visitInfo.email }}</p>
        </div>
      </div>
    </aside>
    <!-- 主体内容区 -->
    <main class="py-8 relative w-3/4 bg-opacity-80 bg-black rounded-2xl text-white">
      <div class="mx-auto text-center shadow-2xl py-16">
        <!-- 欢迎信息 -->
        <h1 class="text-5xl font-bold mb-4">欢迎来到线上博物馆</h1>
        <p class="text-3xl text-gray-400 mb-8">
          在这里，您可以领略众多珍贵文物的魅力，探索历史的奥秘。
        </p>
        <!-- 文物展示区域 -->
        <section class="container mb-12 mx-auto">
          <h2 class="text-4xl font-bold mb-4">近期展览亮点</h2>
          <div class="carousel relative overflow-hidden">
            <div class="flex">
              <div
                  v-for="(exhibitItem, index) in exhibits"
                  :key="index"
                  :class="{ 'active': currentIndex == index }"
                  class="carousel-item"
              >
                <img :src="exhibitItem.image" :alt="exhibitItem.name" class="w-full px-60 pt-12 object-cover" />
                <div class="carousel-caption absolute bottom-0 left-0 p-4 bg-black-50 w-full text-white text-center">
                  <h3 class="text-4xl font-bold mb-1">{{ exhibitItem.name }}</h3>
                  <p class="text-3xl">{{ exhibitItem.description }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="flex relative items-center justify-between text-4xl">
            <button class="carousel-control prev" @click="prevExhibit">Prev</button>
            <button class="carousel-control next" @click="nextExhibit">Next</button>
          </div>
        </section>
        <section class="section-container">
          <!-- 左边：近一周参观人数折线图 -->
          <div class="chart-container">
            <el-card class="box-card" style="background-color: transparent; border-color: transparent;">
              <canvas id="visitChart" width="1000" height="800"></canvas>
            </el-card>
          </div>
          <!-- 右边：近一个月热门展品点击次数柱状图 -->
          <div class="rank-container">
            <el-card class="box-card" style="background-color: transparent; border-color: transparent;">
              <canvas id="rankChart" width="1000" height="800"></canvas> <!-- 为新的图表添加canvas元素，设置合适的宽度和高度 -->
            </el-card>
          </div>
        </section>
      </div>
      <!-- 返回顶部按钮 -->
      <div class="mt-12 mb-20 text-left text-4xl">
        <button class="bg-amber-500 text-white px-8 py-4 rounded-full hover:bg-amber-600 focus:outline-none" @click="scrollToTop">
          返回顶部
        </button>
      </div>
    </main>
    <!-- 底部版权信息区 -->
    <footer class="p-4 text-5xl text-white text-center relative">
      &copy; {{ currentYear }} 趣味博物馆项目组. 保留所有权利。
    </footer>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, onUnmounted, inject} from 'vue';
import { useRouter } from 'vue-router';
import {Chart} from 'chart.js';
import 'chart.js/auto';
import 'animate.css';


export default defineComponent({
  name: 'Home',
  setup() {
    const router = useRouter();
    const visitInfo = ref({
      username: '游客',
      email: 'user@example.com',
      avatar: 'src/assets/images/avatar.png',
      role: '游客'
    });
    const currentYear = ref(new Date().getFullYear());
    const currentIndex = ref(0);
    const intervalTime = 3000; // 3秒切换一次
    let carouselInterval: number | undefined;
    const exhibits = ref([
      {
        name: '展览品1：青铜鼎',
        image: 'src/assets/images/artifacts/exhibit1.png',
        description: '详细介绍青铜鼎的历史背景和工艺特点...'
      },
      {
        name: '展览品2：陶瓷花瓶',
        image: 'src/assets/images/artifacts/exhibit2.png',
        description: '展示陶瓷花瓶的精美造型和艺术价值...'
      },
      {
        name: '展览品3：书画作品',
        image: 'src/assets/images/artifacts/exhibit3.png',
        description: '解读书画作品的创作风格和文化意义...'
      },
      {
        name: '展览品4：青铜剑',
        image: 'src/assets/images/artifacts/exhibit4.png',
        description: '讲述青铜剑在古代战争和文化中的角色...'
      },
      {
        name: '展览品5：陶瓷雕塑',
        image: 'src/assets/images/artifacts/exhibit5.png',
        description: '分析陶瓷雕塑的艺术魅力和制作工艺...'
      },
      {
        name: '展览品6：书法作品',
        image: 'src/assets/images/artifacts/exhibit6.png',
        description: '领略书法作品的笔墨韵味和历史传承...'
      },
      // 可以继续添加更多展览品
    ]);

    const nextExhibit = () => {
      currentIndex.value = (currentIndex.value + 1) % exhibits.value.length;
    };

    const prevExhibit = () => {
      currentIndex.value = (currentIndex.value - 1 + exhibits.value.length) % exhibits.value.length;
    };

    const startCarousel = () => {
      carouselInterval = window.setInterval(nextExhibit, intervalTime);
    };

    const stopCarousel = () => {
      if (carouselInterval) {
        window.clearInterval(carouselInterval);
        carouselInterval = undefined;
      }
    };

    const scrollToTop = () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    };

    const visitData = {
      labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      datasets: [
        {
          label: '参观人数',
          data: [120, 150, 180, 1000, 220, 250, 280],
          backgroundColor: [
            '#f0b90b',  // 为每个柱子设置颜色，这里示例设置了统一的颜色，也可以设置不同颜色的数组与数据对应
            '#f0b90b',
            '#f0b90b',
            '#f0b90b',
            '#f0b90b',
            '#f0b90b',
            '#f0b90b'
          ],
          borderColor: [
            '#f0b90b',  // 柱子边框颜色，同样可设置与数据对应数量的颜色数组
            '#f0b90b',
            '#f0b90b',
            '#f0b90b',
            '#f0b90b',
            '#f0b90b',
            '#f0b90b'
          ],
          borderWidth: 1,
          barPercentage: 0.5,  // 柱子宽度占可用空间的比例，可根据实际需求调整显示效果
          categoryPercentage: 0.8  // 类目宽度占可用空间的比例，可调整柱子间隔等显示效果
        }
      ]
    };
    const rankList = ref([
      {name: '文物1', description: '文物描述1', clickCount: 100},
      {name: '文物2', description: '文物描述2', clickCount: 150},
      {name: '文物3', description: '文物描述3', clickCount: 80},
    ]);

    const initChart = () => {
      const ctx = document.getElementById('visitChart') as HTMLCanvasElement;
      new Chart(ctx, {
        type: 'bar',
        data: visitData,
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: true,
              labels: {
                font: {
                  size: 32
                },
                color: 'rgb(255,255,255)'
              }
            },
            title: {
              display: true,
              text: '近一周参观人数变化趋势',
              font: {
                size: 40
              },
              color: 'rgb(255,255,255)'
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              title: {
                display: true,
                text: '参观人数',
                font: {
                  size: 36
                },
                color: 'rgb(255,255,255)'
              },
              ticks: {
                font: {
                  size: 28
                },
                color: 'rgb(255,255,255)'
              }
            },
            x: {
              title: {
                display: true,
                text: '日期',
                font: {
                  size: 36
                },
                color: 'rgb(255,255,255)'
              },
              ticks: {
                font: {
                  size: 28
                },
                color: 'rgb(255,255,255)'
              }
            }
          },
          layout: {
            padding: {
              left: 10,
              right: 10,
              top: 10,
              bottom: 10
            }
          },
        }
      });
    };
    const initRankChart = () => {
      const ctx = document.getElementById('rankChart') as HTMLCanvasElement;
      const labels = rankList.value.map(item => item.name); // 获取文物名称作为图表的x轴标签
      const data = rankList.value.map(item => item.clickCount); // 获取点击次数作为图表的数据

      new Chart(ctx, {
        type: 'bar', // 设置图表类型为横向柱状图
        data: {
          labels: labels,
          datasets: [
            {
              label: '点击次数',
              data: data,
              backgroundColor: 'rgba(75, 192, 192, 0.8)', // 设置柱子颜色，可根据喜好调整
              borderColor: 'rgba(75, 192, 192, 1)',
              borderWidth: 1
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            title: {
              display: true,
              text: '近一个月热门展品点击次数',
              font: {
                size: 40
              },
              color: 'rgb(255,255,255)'
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              title: {
                display: true,
                text: '文物名称',
                font: {
                  size: 36
                },
                color: 'rgb(255,255,255)'
              },
              ticks: {
                font: {
                  size: 28
                },
                color: 'rgb(255,255,255)'
              }
            },
            x: {
              title: {
                display: true,
                text: '点击次数',
                font: {
                  size: 36
                },
                color: 'rgb(255,255,255)'
              },
              ticks: {
                font: {
                  size: 28
                },
                color: 'rgb(255,255,255)'
              }
            }
          },
          layout: {
            padding: {
              left: 10,
              right: 10,
              top: 10,
              bottom: 10
            }
          },
        }
      });
    };
    onMounted(() =>{
      startCarousel();
      initChart();
      initRankChart()
    });
    onUnmounted(() => {
      stopCarousel();
    });

    const handleFileUpload = (event: Event) => {
      const fileInput = event.target as HTMLInputElement;
      if (fileInput.files && fileInput.files[0]) {
        // 处理文件上传逻辑，比如可能是用户上传自己的文物图像进行分析或分享
        console.log(fileInput.files[0]);
      }
    };

    // 用户详情页面跳转函数
    const goToUserCenter = () => {
      router.push('/UserCenter');
    };

    const goToGame = () => {
      router.push('/Camera');
    };

    const goToAbout = () => {
      router.push('/About');
    };

    const goToExhibitions = () => {
      router.push('/Exhibitions');
    };

    return {
      currentYear,
      visitInfo,
      handleFileUpload,
      previewImage: ref<string | null>(null),
      currentIndex,
      goToUserCenter,
      goToExhibitions,
      goToGame,
      goToAbout,
      exhibits,
      nextExhibit,
      prevExhibit,
      visitData,
      rankList,
      scrollToTop
    };
  },
});
</script>

<style scoped>
.carousel-item {
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* 保留过渡效果但仅用于切换时的淡入淡出 */
}

.carousel-item.active {
  opacity: 1;
  position: relative; /* 确保活动项是相对于其容器定位的 */
}

.carousel-control {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  background-color: rgba(255, 215, 0, 0.5); /* 金色半透明 */
  color: white;
  border: none;
  padding: 16px;
  cursor: pointer;
  z-index: 10;
}

.carousel-control.prev {
  left: 18px;
}

.carousel-control.next {
  right: 18px;
}

.carousel-caption {
  background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明 */
}

/* 整体布局容器样式 */
.section-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
}

/* 左边图表容器样式 */
.chart-container {
  width: 48%;
  background-color: rgba(0, 0, 0, 0); /* 改为透明背景 */
  border-radius: 20px;
  padding: 20px;
  position: relative; /* 为了让闪烁边框的伪元素相对其定位 */
  overflow: visible; /* 隐藏超出部分，避免闪烁边框超出容器显示异常 */
}

/* 右边排行榜（现在是图表）容器样式 */
.rank-container {
  width: 48%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 8px;
  padding: 20px;
  position: relative; /* 为了让闪烁边框的伪元素相对其定位 */
  overflow: visible; /* 隐藏超出部分，避免闪烁边框超出容器显示异常 */
}

/* 标题样式 */
h2 {
  margin-bottom: 10px;
}

/* 为排行榜列表项添加闪烁边框动画效果 */
.rank-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent; /* 初始边框透明 */
  border-radius: 8px;
  animation: borderBlink 2s infinite; /* 应用闪烁动画，时长2秒，无限循环 */
  z-index: 0; /* 确保边框在文字下方显示 */
}

/* 图表容器添加闪烁边框动画效果 */
.chart-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border-width: 10px;
  border-style: solid;
  border-image: linear-gradient(to right bottom, #f0b90b, transparent) 1; /* 从左到右的渐变，从#f0b90b到透明 */
  animation: borderBlink 2s infinite;
}

@keyframes borderBlink {
  0% {
    border-image: linear-gradient(to left top, #f0b90b, transparent) 2; /* 闪烁颜色设置为amber-600对应的颜色，和右边容器呼应，可调整 */
  }
  50% {
    border-color: transparent;
  }
  100% {
    border-color: #f0b90b;
  }
}
</style>